<template>
	<tm-fullView>
		<template v-slot:default="{info}">
			<view :style="{minHeight:info.height+'px'}" :class="[$tm.vx.state().tmVuetify.black?'black':'grey text']">
				<tm-menubars title="我的预算" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
				<view class="shadow-24 ">
					<!-- <tm-sheet :padding="[16,16]" :shadow="24" v-if="list.length > 0"> -->
					<view class="ma-32 " v-for="(item,index) in list" @click="clickItem(item)">
						<tm-coupon color="orange" :hdata="item"></tm-coupon>
					</view>
					<!-- </tm-sheet> -->
				</view>
				<tm-flotbutton actions-pos="top" label="添加" color="bg-gradient-blue-accent" :actions="flotList"
					@change="selectType"></tm-flotbutton>

				<tm-poup v-model="share" position="center" width="500">
					<tm-sheet>
						<tm-row>
							<tm-col :grid="6">
								<tm-button theme="bg-gradient-blue-accent" size="m" @click="view">查看</tm-button>
							</tm-col :grid="6">
							<tm-col>
								<tm-button theme="bg-gradient-blue-accent" size="m" @click="remove">删除</tm-button>
							</tm-col>
						</tm-row>
					</tm-sheet>
				</tm-poup>
			</view>
		</template>
	</tm-fullView>
</template>
<script>
	import tmCol from "@/tm-vuetify/components/tm-col/tm-col.vue"
	import tmRow from "@/tm-vuetify/components/tm-row/tm-row.vue"
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmSwitchList from '@/tm-vuetify/components/tm-switchList/tm-switchList.vue'
	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
	import tmForm from "@/tm-vuetify/components/tm-form/tm-form.vue"
	import tmPoup from "@/tm-vuetify/components/tm-poup/tm-poup.vue"
	import tmInput from "@/tm-vuetify/components/tm-input/tm-input.vue"
	import tmRadio from "@/tm-vuetify/components/tm-radio/tm-radio.vue"
	import tmGroupradio from "@/tm-vuetify/components/tm-groupradio/tm-groupradio.vue"
	import tmImages from "@/tm-vuetify/components/tm-images/tm-images.vue"
	import tmDivider from "@/tm-vuetify/components/tm-divider/tm-divider.vue"
	import tmFlotbutton from "@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue"
	import tmCoupon from '@/tm-vuetify/components/tm-coupon/tm-coupon.vue';

	export default {
		components: {
			tmCol,
			tmRow,
			tmFullView,
			tmMenubars,
			tmSheet,
			tmSwitchList,
			tmButton,
			tmForm,
			tmPoup,
			tmInput,
			tmRadio,
			tmGroupradio,
			tmImages,
			tmDivider,
			tmFlotbutton,
			tmCoupon
		},
		data() {
			return {
				d_1: {
					sale: '5.00',
					saleSplit: '已花费',
					saleLable: '2021年12月',
					title: '预算100.00',
					time: '50%',
					btnText: '时间进度50%'
				},
				flotList: [{
						icon: 'icon-plus-circle-fill',
						color: 'bg-gradient-green-accent'
					},
					{
						icon: 'icon-minus-circle-fill',
						color: 'bg-gradient-blue-accent'
					}
				],
				share: false,
				show: false,
				list: [],
				selected: null,
				open: false,
				showremark: false,
				groupchecked: {
					c_1: true,
					c_2: false
				},
				shareurl: '',
				share: false,
				item_1: [{
						text: "编辑",
						width: 140,
						color: 'black'
					},
					{
						text: "共享",
						width: 140,
						color: 'blue'
					},
					{
						text: "删除",
						width: 140,
						color: 'red'
					},
				],
				item_2: [{
						text: "编辑",
						width: 140,
						color: 'black'
					},
					{
						text: "取消共享",
						width: 140,
						color: 'blue'
					},
					{
						text: "删除",
						width: 140,
						color: 'red'
					},
				],
				book: {
					id: '',
					name: '',
					selected: null,
					uid: ''
				},
				selected: {}
			}
		},
		onShow() {
			this.loadBook()
			this.shareurl = ''
		},
		methods: {
			selectType(e) {
				let er = 1;
				if (e == 0) {
					//收入
					er = 1;
				} else {
					//支出
					er = 0;
				}
				uni.navigateTo({
					url: '/pages/user/add?type=add&er=' + er,
					fail: e => {
						t.show = true;
					}
				})
			},
			clickItem(e) {
				this.selected = e
				this.share = true
			},
			gogog(e) {
				if (!e) {
					this.book = {
						id: '',
						name: '',
						selected: null
					}
					this.groupchecked = {
						c_1: true,
						c_2: false
					}
				}
			},
			view() {
				this.share = false;
				uni.navigateTo({
					url: '/pages/user/add?type=view&data='+encodeURIComponent(JSON.stringify(this.selected)),
					fail: e => {
						t.show = true;
					}
				})
			},
			remove(){
				this.share = false;
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认删除吗?',
					success: function(res) {
						if (res.confirm) {
							that.$ajax.get('/budget/delete/' + that.selected.id).then(res => {
								if (res.code == 1) {
									that.loadBook()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			submit(e) {
				if (e === false) {
					uni.$tm.toast("请填写必填项")
				} else {
					this.judgeLogin(res => {
						this.book.uid = res.id
						this.$ajax.post('/book/save', this.book).then(res => {
							if (res.code == 1) {
								uni.$tm.toast("保存成功")
								this.book = {
									id: '',
									name: '',
									selected: null
								}
								this.showremark = false
								this.loadBook()
							} else {
								uni.$tm.toast('保存失败');
							}
						})
					})
				}
			},
			shiguchechange(e) {
				if ((e[0].name == '1' && e[0].checked) || (e[0].name == '0' && !e[0].checked)) {
					this.book.selected = 1;
				} else {
					this.book.selected = 0;
				}
			},
			success(e) {
				//提交成功 。
				uni.$tm.toast(e.msg)
			},
			loadBook() {
				this.judgeLogin(res => {
					this.$ajax.post('/budget/list', {
						uid: res.id
					}).then(res => {
						let arr = []
						for (let i in res.data) {
							let data = res.data[i];
							let out = {}
							if (data.er == 1) {
								out = {
									id: data.id,
									renewal: data.renewal,
									type: data.type,
									value: data.value,
									jihua: data.jihua,
									er: data.er,
									data: data.data,
									sale: data.all,
									saleSplit: '已收入',
									saleLable: data.time,
									title: '目标' + data.value,
									time: (Math.round((data.all / data.value) * 100) >= 100) ? '达标' :
										'已达标' + Math.round((data.all / data.value) * 100) + '%',
									btnText: data.renewal == 1 ? '续期' : '不续期'
								}
							} else {
								out = {
									id: data.id,
									renewal: data.renewal,
									type: data.type,
									jihua: data.jihua,
									value: data.value,
									er: data.er,
									data: data.data,
									sale: data.all,
									saleSplit: '已花费',
									saleLable: data.time,
									title: '预算' + data.value,
									time: (Math.round((data.all / data.value) * 100) >= 100) ? '超支' :
										'已使用' + Math.round((data.all / data.value) * 100) + '%',
									btnText: data.renewal == 1 ? '续期' : '不续期'
								}
							}

							arr.push(out)
						}
						this.list = arr
					})
				})
			},
			addBook() {
				this.showremark = true;
			},
			action(e, item) {
				this.shareurl = ''
				this.open = false;
				let that = this;
				if (e.index == 0) {
					this.showremark = true;
					this.book = item
					console.log(this.book)
					if (this.book.selected == 1) {
						this.groupchecked.c_2 = true;
					} else {
						this.groupchecked.c_1 = true;
					}
				} else if (e.index == 1) {
					if (item.status == 1) {
						uni.showModal({
							title: '提示',
							content: '确认取消共享账本?',
							success: function(res) {
								if (res.confirm) {
									that.$ajax.get('/book/noshare/' + item.id).then(res => {
										if (res.code == 1) {
											that.loadBook()
										}
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '共享账本,扫码查看',
							success: function(res) {
								if (res.confirm) {
									that.$ajax.get('/book/share/' + item.id).then(res => {
										if (res.code == 1) {
											that.share = true
											that.shareurl = "data:image/jpg;base64," + res.data
										}
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '确定删除该账本及账本下的账单?',
						success: function(res) {
							if (res.confirm) {
								that.$ajax.get('/book/delete/' + item.id).then(res => {
									that.loadBook()
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			saveBook() {

			},
			openurl(e) {
				let t = this;
				console.log(e);
				uni.navigateTo({
					url: e.data.url,
					fail: e => {
						t.show = true;
					}
				})
			}
		}
	}
</script>

<style>

</style>
